快速入门

开发准备

引入js

<script src="https://static.mudu.tv/static/mrtc-js-sdk/1.2.10/mrtc-js-sdk.js"></script>

• 版本与更新功能

MRTC推、拉流模式

• 推流模式

// 创建预览画面
let localVideo = document.getElementById('localVideo');

// 创建推流对象
let broadcaster = new Mrtc.Broadcaster(localVideo, {
                type: "camera", // 推流类型
                audioDeviceId: audioSource, // 音频设备
                videoDeviceId: videoSource, // 视频设备（使用js接口获取设备id）
                bitrate: 200, // 推流码率
            })

// 错误消息
broadcaster.on("error", err => {
    console.log("error:", err)
})

// 推流成功回调
broadcaster.on("published", () => {
    console.log("推流成功")
})

// 开启推流
broadcaster.startPublish("mrtc://mrtc.myun.tv/live/test")

• 拉流模式

// 创建拉流画面
let video = document.getElementById('remoteVideo');

// 创建拉流对象
var player = new Mrtc.Player("mrtc://mrtc.myun.tv/live/test", video, {
            autoReconnect: true, // 是否自动播放（原始流断流后，不断重试）
            video: true, // 是否拉去视频流
            audio: true, // 是否拉去音频流
        })

// 监听错误消息
player.on("error", err => {
    console.log("@@@@error:", err)
})

// 拉流成功回调
player.on("stream_ready", (stream) => {
    console.log("拉流成功")
})

// 开始拉流
player.startPlay()

互动直播

互动直播接口油两种模式：

• 简单模式：主播嘉宾只能使用摄像头或者屏幕分享来进行互动。

• 混流模式：主播嘉宾能随意的组合各类元素，进行多元素混流后的互动。

• 简单模式

// 初始化互动对象
let interactiveClient = new Mrtc.InteracitveClient("service.myun.tv", containerDom, {
    type: "camera",
    bitrate: 2000
})

// 在控制台创建互动直播，如需要自动获取加入房间参数，需要使用互动直播服务接口(链接)。
interactiveClient.join(roomid, "main", "password") // main 为主播，其它字符串为嘉宾,join并且立马推流

interactiveClient.on("error", err => {
    // 出错回调
})

interactiveClient.on("published", () => {
    // 本地推流成功
})

interactiveClient.on("publisher_list", list => {
    // 根据嘉宾列表播放嘉宾
    list.forEach(client => {
        if (client.role != "main" && client.status == "publish") {
            // 为每一个嘉宾创建观看画面
            let container = document.getElementById('video'+client.role)
            interactiveClient.playClient(client.role, container)
        }
    });
})

interactiveClient.on("publish_event", client => {
    // 播放房间的嘉宾
    if (client.role != "main" && client.status == "publish") {
        // 为每一个嘉宾创建观看画面
        let container = document.getElementById('video'+client.role)
        interactiveClient.playClient(client.role, container)
    }
})

interactiveClient.on("unpublish_event", client => {
    // 嘉宾停止推流时停止播放，移除dom
    if (client.role != "main") {
        interactiveClient.stopClient(client.role)
    }
})

• 混流模式

混流模式可以添加丰富的元素，元素详情查看详细API文档

// 初始化互动对象
let interactiveMixClient = new Mrtc.InteracitveMixClient("service.myun.tv", containerDom, {
    type: "camera",
    bitrate: 2000
})

// 在控制台创建互动直播，如需要自动获取加入房间参数，需要使用互动直播服务接口(链接)。
interactiveMixClient.join(roomid, "main", "password") // main 为主播，其它字符串为嘉宾,join并且立马推流

// 添加共享桌面元素
let element = new Mrtc.ElementScreen()
element.loadSrc().then(() => {
    interactiveMixClient.addElement(element)
}).catch(err => {
    console.log(err)
})

// 添加共享窗口元素
element = new Mrtc.ElementCamera()
element.loadSrc({
    // device id
}).then(() => {
    interactiveMixClient.addElement(element)
})

interactiveMixClient.on("error", err => {
    // 出错回调
})

interactiveMixClient.on("published", () => {
    // 本地推流成功
})

interactiveMixClient.on("publisher_list", list => {
    // 根据嘉宾列表播放嘉宾
    list.forEach(client => {
        if (client.role != "main" && client.status == "publish") {
            // 为每一个嘉宾创建观看画面
            let container = document.getElementById('video'+client.role)
            interactiveMixClient.playClient(client.role, container)
        }
    });
})

interactiveMixClient.on("publish_event", client => {
    // 播放房间的嘉宾
    if (client.role != "main" && client.status == "publish") {
        // 为每一个嘉宾创建观看画面
        let container = document.getElementById('video'+client.role)
        interactiveMixClient.playClient(client.role, container)
    }
})

interactiveMixClient.on("unpublish_event", client => {
    // 嘉宾停止推流时停止播放，移除dom
    if (client.role != "main") {
        interactiveMixClient.stopClient(client.role)
    }
})